<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CSS属性

 -->
 <style type="text/css">
 #div1{
 	width: 600px;
 	height: 400px;
 	/* border: 10px dotted  red; 边框 */
 	/* border-bottom: 10px dotted red; */
 	border-bottom-width:10px;
 	border-bottom-style:dotted;
 	border-bottom-color:red;
 	border-left: 10px  solid  green;
 	border-top: 10px solid blue;
 	border-right: 10px dotted yellow; 
 	/*背景图片  */
 	background-image: url("img/1.gif");/* url传入路径  */
 	background-repeat:repeat-x; /*默认向x y轴都平铺 no-repeat 不平铺  repeat-x 在x轴上平铺*/
 }
 #div2{
  width: 300px;
  height: 250px;
  background-image: url("img/ms.jpg");
 }
 #div2:hover{
 	background-position: 0px -250px; /* 给背景图定位  */
 	cursor: pointer;
 }
 body{
 	background-image: url("img/juhua.jpg");
 	background-attachment: fixed;/*固定定位  */
 }
  .cba{
 	font-size: 30px;
 	color: red;
 }
 .abc{  /*一个元素可以用多个类设置样式 ,最终样式是多个类的并集 */
 	font-size: 20px;
 }
 
 #div3{
 	width: 600px;
 	height: 400px;
 	border: 1px solid red;
 	margin: 0 auto;
 }

 </style>
</head>
<body>
<p >一段话上的两个赛季阿格拉格</p>
<div id="div1"></div>
<div id="div2"></div>
<p class="abc cba">pp</p>
<p style="text-align: center;" >文字居中</p><!-- 这些文字在p标签的中间 -->
<ul style="list-style-type:lower-roman; ">
	<li>选项1</li>
	<li>选项2</li>
	<li>选项3</li>
	<li>选项4</li>
</ul>
<div id="div3">
	<form action="">
		<input type="text" placeholder="xxxxxxxx">
	</form>
</div>

<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
</body>
</html>